<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习示例</title>
  <script>
    function f1(){
      let t=setInterval(function(){
        let image=document.getElementById("image");
        if(parseInt(image.style.left)<1350){
          image.style.left=parseInt(image.style.left)+50+"px"
        }
      },100)
    }
    function f2(){
      setInterval(function(){
        let d2=document.getElementById("d2");
        if(parseInt(d2.style.width)<100){
          d2.style.width=parseInt(d2.style.width)+2+"%";
        }
      },100);
    }
    function fn(s) {
        s = "0" + s;
        return s.substring(s.length - 2);
    }

    window.onload = function () {
        setInterval(function () {
            let date = new Date();
            document.getElementById("s1").innerHTML = date.getFullYear() + "年" + fn(date.getMonth() + 1) + "月" + fn(date.getDate()) + "日 " + fn(date.getHours()) + ":" + fn(date.getMinutes()) + ":" + fn(date.getSeconds())
        }, 100);
    }
  </script>
</head>
<body>
<img id="image" src="../images/heihei.gif" style="position: relative;left: 0px" onclick="f1()">
<div id="d1" style="width: 1000px;height: 50px;border: 1px solid">
  <div id="d2" style="width: 2%;height: 100%;background-color: red;" onclick="f2()" ></div>
</div>
<!--
    在浏览器中展示当前时间,时间格式:yyyy年MM月dd日 HH:mm:ss
    要求显示的时间随着真实时间的变化而随之变化
-->
</body>
</html>